<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 1. 准备一个具有宽高的容器 -->
  <div id="main" style="width: 600px; height: 400px"></div>
  <!-- 2. 引入echarts.js -->
  <script src="./lib/echarts.min.js"></script>
  <script>
    // 3. 初始化一个echarts的实例对象
    const myChart = echarts.init(document.querySelector('#main'))
    // 4. 准备对应的配置项
    const option = {
      title: {  // 标题组件
        text: 'ECharts 入门示例' // 主标题
      },
      tooltip: {
        // show: false
      }, //提示框组件
      legend: {  // 图例组件
        // data: ['销量1', '产量1']
      },
      xAxis: { //  x 轴
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {}, // y轴
      series: [ // 系列数据
        {
          name: '销量', // 系列名称
          type: 'bar', // 决定图表的类型 -> 柱状图
          data: [5, 20, 46, 10, 10, 20] // 对应的是x轴的每一项数据
        },
        {
          name: '产量', // 系列名称
          type: 'bar', // 决定图表的类型 -> 柱状图
          data: [20, 50, 70, 30, 20, 30] // 对应的是x轴的每一项数据
        }
      ]
    };
    // 5.将实例对象和配置项建立关联
    myChart.setOption(option)
  </script>
</body>

</html>